<template>
  <el-dialog title="预览"
             :visible="showView"
             @close="handleViewClose">
    <div class="header">
      <el-row>
        <el-col :span="6">
          <span>【题型】:</span>
          <span> {{ showViewObj.questionType === "1" ? '单选' : '多选' }}</span>
        </el-col>
        <el-col :span="6">
          <span>【编号】:</span>
          <span>{{ showViewObj.id }}</span>
        </el-col>
        <el-col :span="6">
          <span>【难度】:</span>
          <span v-if="showViewObj.difficulty==='1'">简单</span>
          <span v-else-if="showViewObj.difficulty==='2'">一般</span>
          <span v-else>困难</span>
        </el-col>
        <el-col :span="6">
          <span>【标签】:</span>
          <span> {{ showViewObj.direction }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <span>【学科】:</span>
          <span> {{ showViewObj.subjectName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】:</span>
          <span> {{ showViewObj.directoryName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】:</span>
          <span> {{ showViewObj.direction }}</span>
        </el-col>
      </el-row>
    </div>
    <hr>
    <div class="body">
      <div>【题干】：</div>
      <div v-html="showViewObj.question" />
    </div>
    <div>{{ showViewObj.questionType === "1" ? '单选' : '多选' }} 选项 ：(以下选中的选项为正确答案)</div>
    <div class="radio">
      <div>
        <el-radio v-for="item in showViewObj.options"
                  :key="item.code"
                  v-model="item.isRight"
                  :label="1">
          {{ item.title }}</el-radio>
      </div>

    </div>
    <div class="footer">
      <hr>
      <span>【参考答案】：</span>
      <el-button type="danger">视频解析</el-button>
      <hr>
      <span>【答案解析】：</span>
      <span> {{ showViewObj.enterpriseID }}</span>
      <hr>
      <span>【题目备注】：</span>
      <span>{{ showViewObj.remarks }}</span>
    </div>

    <template #footer>
      <el-button type="primary"
                 size="small"
                 @click="handleViewClose">关 闭</el-button>

    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'QuestionView',
  props: {
    showView: {
      type: Boolean,
      default: false
    },
    showViewObj: {
      type: Object,
      default: () => { }
    }
  },
  methods: {
    // 关闭弹窗
    handleViewClose () {
      this.$emit('update:showView', false)
    }
  }

}
</script>

<style scoped lang="scss">
.el-dialog {
  ::v-deep .el-dialog__body {
    padding: 8px 20px;
  }
}
.el-row {
  margin-bottom: 30px;
}
.radio {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
</style>
